<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            margin: 0px;
        }

        .default-overflow {
            border: 1px solid black;
        }

        .overflow {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background: pink;
        }

        .overflow-wrap {
            width: 250px;
            height: 100px;
            border: 1px solid black;
            background: pink;
        }

        .word-break {
            width: 250px;
            height: 100px;
            border: 1px solid black;
            background: pink;
        }

        .text-overflow {
            overflow: hidden;
            white-space: nowrap; /*处理元素中的空开，nowrap表示空白符会被合并，对换行无效*/
            width: 200px;
            border: 1px solid black;
            background: pink;
        }
    </style>
  </head>
  <body>
    <!--CSS中万物皆是盒模型，通过width、height等属性约束盒模型的大小，当盒模型内被塞过多内容时则发生溢出-->
    <div style="display: flex;column-gap: 10px">
      <div class="default-overflow" style="width:230px;height: 100px">
        <p>受到height限制后默认怎样溢出？？</p>
        <p>受到height限制后默认怎样溢出？？</p>
        <p>受到height限制后默认怎样溢出？？</p>
        <p>受到height限制后默认怎样溢出？？</p>
      </div>
      <div class="default-overflow" style="width:230px;height: 100px">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    </div>
    <br><br><br><br><br><br>

    <!--overflow属性设置溢出处理方式，其属性值可为直接溢出visible、隐藏溢出hidden、添加滚动条即使无溢出scroll、溢出时添加滚动条auto。overflow-x和overflow-y属性分别设置x和y方向上的溢出处理方式，也可以直接在overflow属性中传入两个值设置-->
    <div style="display: flex;column-gap: 10px">
      <div class="overflow" style="overflow: visible">
        <h4>visible(默认)</h4>
        <p>溢出内容在父元素外部显示</p>
        <p>溢出内容在父元素外部显示</p>
        <p>溢出内容在父元素外部显示</p>
        <p>溢出内容在父元素外部显示</p>
        <p>溢出内容在父元素外部显示</p>
        <p>溢出内容在父元素外部显示</p>
        <p>溢出内容在父元素外部显示</p>
        <p>溢出内容在父元素外部显示</p>
      </div>

      <div class="overflow" style="overflow: hidden">
        <h4>hidden</h4>
        <p>溢出内容被隐藏</p>
        <p>溢出内容被隐藏</p>
        <p>溢出内容被隐藏</p>
        <p>溢出内容被隐藏</p>
        <p>溢出内容被隐藏</p>
        <p>溢出内容被隐藏</p>
        <p>溢出内容被隐藏</p>
        <p>溢出内容被隐藏</p>
      </div>

      <div class="overflow" style="overflow: scroll">
        <h4>scroll</h4>
        <p>为父元素显示滚动条，即使没有溢出</p>
        <p>为父元素显示滚动条，即使没有溢出</p>
        <p>为父元素显示滚动条，即使没有溢出</p>
        <p>为父元素显示滚动条，即使没有溢出</p>
        <p>为父元素显示滚动条，即使没有溢出</p>
        <p>为父元素显示滚动条，即使没有溢出</p>
        <p>为父元素显示滚动条，即使没有溢出</p>
        <p>为父元素显示滚动条，即使没有溢出</p>
      </div>

      <div class="overflow" style="overflow: auto">
        <h4>scroll</h4>
        <p>在发生溢出时提供滚动条</p>
        <p>在发生溢出时提供滚动条</p>
        <p>在发生溢出时提供滚动条</p>
        <p>在发生溢出时提供滚动条</p>
        <p>在发生溢出时提供滚动条</p>
        <p>在发生溢出时提供滚动条</p>
        <p>在发生溢出时提供滚动条</p>
        <p>在发生溢出时提供滚动条</p>
      </div>

      <div class="overflow" style="overflow-x: scroll;overflow-y: hidden">
        <h4>overflow-x & overflow-y</h4>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
      </div>

      <div class="overflow" style="overflow: scroll hidden">
        <h4>overflow:x y</h4>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
        <p>水平scroll，垂直hidden</p>
      </div>
    </div>
    <br><br><br><br><br><br>

    <!--overflow-wrap属性设置不可被分割的字符串的溢出处理方式，其属性值可为正常单词断点处中断normal或强制分割break-word-->
    <div style="display: flex;column-gap: 30px">
      <div class="overflow-wrap">(default)beautifulbeautifulbeautiful</div>
      <div class="overflow-wrap" style="overflow-wrap: normal">(normal)beautifulbeautifulbeautiful</div>
      <div class="overflow-wrap" style="overflow-wrap: break-word">(breakword)beautifulbeautifulbeautiful</div>
      <div class="overflow-wrap" style="overflow-wrap: anywhere">(anywhere)beautifulbeautifulbeautiful</div>
    </div>
    <br><br><br><br><br><br>

    <!--word-break属性设置不可被分割的单词的断行处理方式，其属性值可为默认断行规则normal、任意字符断行break-all或不断行keep-all-->
    <div style="display: flex;column-gap: 30px">
      <div class="word-break">(default)beautifulbeautifulbeautiful</div>
      <div class="word-break" style="word-break: normal">(normal)beautifulbeautifulbeautiful</div>
      <div class="word-break" style="word-break: break-all">(breakall)beautifulbeautifulbeautiful</div>
      <div class="word-break" style="word-break: keep-all">(keepall)beautifulbeautifulbeautiful</div>
    </div>
    <br><br><br><br><br><br>

    <!--
      text-overflow属性设置被隐藏溢出内容的提示方式，其属性值为一个时表示行末溢出内容的提示方式，属性值为两个时分别表示左溢出行为和右溢出行为。text-overflow属性属性值如下表
      |           属性值            |                             说明                             |
      | :------------------------: | :----------------------------------------------------------: |
      |            clip            |           内容区极限处截断文本，可能发生于单词中间           |
      |          ellipsis          | 内容区极限处截断文本并使用…作为溢出内容的提示方式。该…被添加于内容区中，若内容区小到…装不下则…也会被截断 |
      |           string           | 内容区极限处截断文本并使用string作为溢出内容的提示方式。该string被添加于内容区中，若内容区小到string装不下则string也会被截断 |
      |            fade            |   内容区极限处截断文本并使用淡出特效作为溢出内容的提示方式   |
      | fade(length | percentage)  | 内容区极限处截断文本并使用淡出特效作为溢出内容的提示方式。参数设置淡出特效的距离，小于0的值视为0，大于行宽的值视为行宽 |
      -->
    <div style="display: flex;column-gap: 20px">
      <div class="text-overflow" style="text-overflow: clip">[clip]确定如何提示用户存在隐藏的溢出内容</div>
      <div class="text-overflow" style="text-overflow: ellipsis">[ellipsis]确定如何提示用户存在隐藏的溢出内容</div>
      <div class="text-overflow" style="text-overflow: '...'">[string(NO)]确定如何提示用户存在隐藏的溢出内容</div>
      <div class="text-overflow" style="text-overflow: fade">[fade(NO)]确定如何提示用户存在隐藏的溢出内容</div>
      <div class="text-overflow" style="text-overflow: fade(10px)">[fade()(NO)]确定如何提示用户存在隐藏的溢出内容</div>
      <div class="text-overflow" style="text-overflow: ellipsis ellipsis">[双值(NO)]确定如何提示用户存在隐藏的溢出内容
      </div>
    </div>
  </body>
</html>